<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- IF IE .... -->
    <!-- IF END -->
    <!-- for start:item in arr -->
    <ul><!-- 我是注释 -->
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <!-- for end ; -->
    <script>
        var ulele = document.querySelector("ul");
        console.log(  ulele.childNodes);


        // 1.点击每个li之后 过半秒li文字颜色变成红色
        var lis=document.querySelectorAll("li")
        // lis.forEach(function(item){
        //     item.onclick=function(){
        //         // setInterval(function(){
        //         //     console.log(111);
        //         //     item.style.color="red"
        //         // },500)

        //         setTimeout(function(){
        //             console.log(111);
        //             item.style.color="red"
        //         }, 500);
                
        //     }
        // })


        // for循环的问题
        // for(var i=0;i<lis.length;i++){
        //     lis[i].onclick = function(){
        //         // console.log(this);
        //         var that = this;
        //         setTimeout(function(){
        //             console.log(5)
        //             // lis[i].style.color = "red";
        //             // this.style.color = "red";
        //             that.style.color = "red";
        //         }, 500);
        //     }
        // }

        // console.log(i);


    </script>
</body>
</html>